
<template>
  <div id="signatureBox">
    <p v-if="showTips">点击此处,开始手写你的名字</p>
    <div ref="canvas" id="canvas"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTips:true
    };
  },
  props:['type'],
  mounted() {
    console.log('type',this.type)

  },
  watch:{
    type(val){
      console.log(val)
      if(val){
        this.init_lineCanvas(val);
      }
    }
  },
  methods: {
    init_lineCanvas(value) {
      let that = this;
      document.getElementById('canvas').addEventListener(
        "touchmove",
        function(event) {
          event.preventDefault();
        },
        { passive: false }
      );
      new this.lineCanvas({
        el: document.getElementById("canvas"), // 绘制canvas的父级div
        linewidth: 3, // 线条粗细，选填
        color: (value=='assit')?'#f5a100':'red', // 线条颜色，选填
        background: "rgba(255,255,255,0)", // 线条背景，选填
        vue:that
      });
    },
    /* 电子签名手写板 */
    lineCanvas(obj) {
      this.linewidth = 8;
      this.color = "#000000";
      // this.background = "rgba(255,255,255,.63)";
      for (var i in obj) {
        this[i] = obj[i];
      }
      this.canvas = document.createElement("canvas");
      this.el.appendChild(this.canvas);
      this.cxt = this.canvas.getContext("2d");
      this.canvas.id= 'myCanvas';
      let boxDomFont = 100 * (window.innerWidth / 750);
      this.canvas.width = 6.5*parseInt(boxDomFont);
      this.canvas.height = 3.37*parseInt(boxDomFont);
      this.cxt.fillStyle = this.background;
      this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
      this.cxt.strokeStyle = this.color;
      this.cxt.lineWidth = this.linewidth;
      this.cxt.lineCap = "round";
      let canvasTop = 8.37*parseInt(boxDomFont);
      let canvasLeft = .5*parseInt(boxDomFont);
      // 开始绘制
      this.canvas.addEventListener(
        "touchstart",
        function(e) {
          this.vue.showTips = false;
          this.cxt.beginPath();
          this.cxt.moveTo(
            e.changedTouches[0].pageX - canvasLeft,
            e.changedTouches[0].pageY - canvasTop
          );
        }.bind(this),
        false
      );
      // 绘制中
      this.canvas.addEventListener(
        "touchmove",
        function(e) {
          this.cxt.lineTo(
            e.changedTouches[0].pageX - canvasLeft,
            e.changedTouches[0].pageY - canvasTop
          );
          this.cxt.stroke();
        }.bind(this),
        false
      );
      // 结束绘制
      this.canvas.addEventListener(
        "touchend",
        function() {
          this.cxt.closePath();
        }.bind(this),
        false
      );
    },
    getSignImg(){
      return  this.showTips?'':document.getElementById("myCanvas").toDataURL();
    },
    clearCanvas(){
      this.showTips = true;
      let boxDomFont = 100 * (window.innerWidth / 750);
      let canvasW = 6.5*parseInt(boxDomFont);
      let canvasH = 3.37*parseInt(boxDomFont);
      document.getElementById("myCanvas").getContext('2d').clearRect(0, 0, canvasW, canvasH);
      document.getElementById("myCanvas").style.background = 'rgba(255,255,255,.63)';
    }
  }
};
</script>

<style>
#signatureBox {
  width: 6.5rem;
  height: 3.37rem;
  position: relative;
  text-align: center;
}
#signatureBox p{
  font-size: .22rem;
  color: #949495;
  top: 1.52rem;
  position: absolute;
  width: 100%;
  pointer-events: none;
}
#canvas canvas {
  display: block;
  /* background: rgba(255,255,255,.63) */
}
</style>
